<template>
  <div class="factory-logic-wrapper">
    <div class="logical-title">
      <i :class="showLogic ? 'el-icon-caret-bottom' : 'el-icon-caret-right'" @click="toggleShow"></i>
      上传数据
    </div>
    <el-collapse-transition>
      <div class="import-wrapper" v-show="showLogic">
        <tag-table
          ref="table"
          @refresh="getList"
          :data="dataList"
          :loading="loading"
          :columns="columns"
          :params="params"
          :total="totalSize"
          :maxHeight="300"
        >
        </tag-table>
        <el-button type="primary" size="medium" class="import-button" @click="$refs.importDrawer.showDrawer(tagId)">
          导入客群数据
        </el-button>
      </div>
    </el-collapse-transition>
    <import-drawer ref="importDrawer" @callback="setData"></import-drawer>
  </div>
</template>

<script>
import importDrawer from './import-drawer'
export default {
  props: {
    tagId: {
      type: String,
      default: ''
    }
  },
  components: { importDrawer },
  data() {
    return {
      loading: false,
      dataList: [],
      columns: [],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0,
      sourceData: {
        custGroupId: '',
        dbNm: '',
        tableNm: '',
        fieldNm: ''
      },
      showLogic: true
    }
  },
  methods: {
    setData(data) {
      if (data) {
        this.sourceData.custGroupId = data.custGroupId
        this.sourceData.dbNm = data.dbNm
        this.sourceData.tableNm = data.tableNm
        this.sourceData.fieldNm = data.fieldNm
        this.getList(this.sourceData.custGroupId)
      }
    },
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('cust/import/records'),
        method: 'get',
        params: this.$ajax.setParams(Object.assign({}, this.params, { custGroupId: this.sourceData.custGroupId }))
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data.currentPageNum === this.params.currentPageNum) {
            this.setColumns(data.data.columnNames)
            this.dataList = data.data.records
            this.totalSize = data.data.totalSize
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    setColumns(data) {
      if (this.columns.length !== data.length) {
        let columns = []
        data.forEach(item => {
          let param = {
            show: true,
            label: item.columnCname,
            prop: item.columnEname,
            search: true,
            searchKey: '',
            align: 'center'
          }
          if (item.columnEname === 'dqc_error') {
            param.searchType = 'select'
            param.searchList = [{ key: '通过', value: '通过' }, { key: '不通过', value: '不通过' }]
          }
          columns.push(param)
        })
        this.columns = columns
      }
    },
    toggleShow() {
      this.showLogic = !this.showLogic
    }
  }
}
</script>

<style lang="scss">
.factory-logic-wrapper {
  .logical-title {
    font-size: 18px;
    font-weight: bold;
    height: 80px;
    padding: 20px;
    line-height: 40px;
    color: #1e3592;
    background-color: #c0d2f6;
    border-radius: 5px;
    i {
      cursor: pointer;
    }
  }
  .import-wrapper {
    padding: 10px 30px;
    position: relative;
    .el-pagination {
      margin-right: 120px;
    }
    .import-button {
      position: absolute;
      right: 30px;
      bottom: 10px;
    }
  }
}
</style>
